<template>
  <div class="all" v-loading="loading">
    <div class="box">
      <div class="allhead">
        <span>{{ tabledata.type }}预览</span>
        <div class="rule" v-if="tabledata.type == '单选题'">
          <span>每道题只有一个正确答案</span>
        </div>
        <div class="rule" v-if="tabledata.type == '多选题'">
          <span v-if="tabledata.multipleFlag == 0"
            >每道题有多个正确答案,全对给分</span
          >
          <span v-if="tabledata.multipleFlag == 1"
            >每道题有多个正确答案,漏选给分</span
          >
          <span v-if="tabledata.multipleFlag == 2"
            >每道题有多个正确答案,漏选给固定分({{
              tabledata.multipleFraction
            }}分)</span
          >
        </div>
        <div class="rule" v-if="tabledata.type == '填空题'">
          <span>每道题有多个填空，每空分值不同</span>
        </div>
        <div class="rule" v-if="tabledata.type == '判断题'">
          <span>每道题只有一个正确答案</span>
        </div>
        <div class="rule" v-if="tabledata.type == '简答题'">
          <span>简答题答案不具有唯一性，答案相似即可</span>
        </div>
        <div class="rule" v-if="tabledata.type == '大题'">
          <span>大题内有多个小题，请仔细阅读后回答。</span>
        </div>
      </div>

      <div
        class="oneselect-cotainer"
        v-if="tabledata.type == '单选题' || tabledata.type == '单项选择题'"
      >
        <Audio :audioUrl="tabledata.audioUrl" />
        <div class="oneselect-header">
          <span style="font-size: 18px">1.</span>
          <span class="type">单选</span>
          <span
            class="oneselect-header-title ql-editor"
            v-html="tabledata.smallTopic"
          ></span>
          <span class="score">({{ tabledata.fraction }}分)</span>
        </div>
        <div
          class="oneselect-body"
          v-for="(item, i) in tabledata.options"
          :key="i"
        >
          <i
            :class="item.keyTrue ? 'el-icon-success' : 'el-icon-error'"
            :style="{ color: item.keyTrue ? '#67c23a' : 'red' }"
          ></i>
          <span>{{ String.fromCharCode(i + 65) }}</span>
          .{{ item.context }}
        </div>
        <div v-for="(item2, i2) in tabledata.options" :key="'info-' + i2">
          <div class="oneselect-floote-answer" v-if="item2.keyTrue">
            答案：
            <span>{{ String.fromCharCode(i2 + 65) }}</span>
            .{{ item2.context }}
          </div>
        </div>
        <div class="oneselect-floote">
          小题讲解：
          <span class="answer">{{ tabledata.explains }}</span>
        </div>
      </div>

      <div
        class="more-cotainer"
        v-if="tabledata.type == '多选题' || tabledata.type == '多项选择题'"
      >
        <Audio :audioUrl="tabledata.audioUrl" />
        <div class="more-header">
          <span style="font-size: 18px">1.</span>
          <span class="type">多选</span>
          <span
            class="oneselect-header-title ql-editor"
            v-html="tabledata.smallTopic"
          ></span>
          <span class="score">({{ tabledata.fraction }}分)</span>
        </div>
        <div class="more-body" v-for="(item, i) in tabledata.options" :key="i">
          <i
            :class="item.keyTrue ? 'el-icon-success' : 'el-icon-error'"
            :style="{ color: item.keyTrue ? '#67c23a' : 'red' }"
          ></i>
          {{ String.fromCharCode(i + 65) }}
          .{{ item.context }}
        </div>
        <div class="more-floote">
          <span class="more-floote-answer">答案：{{ tabledata.answer }}</span>
        </div>
        <div class="more-floote">
          <span class="answer">小题讲解：{{ tabledata.explains }}</span>
        </div>
      </div>

      <div class="bank-cotainer" v-if="tabledata.type == '填空题'">
        <Audio :audioUrl="tabledata.audioUrl" />
        <div class="bank-header">
          <span style="font-size: 18px">1.</span>
          <span class="type">填空</span>
          <span
            class="oneselect-header-title ql-editor"
            v-html="tabledata.smallTopic"
          ></span>
        </div>
        <div class="bank-floote">
          <div class="bank-floote-answeritem">
            <div>
              <span>答案：</span>
            </div>
            <div class="bank-floote-answeritem-body">
              <span
                class="bank-floote-answer"
                v-for="(item, i) in tabledata.options"
                :key="i"
              >
                {{ item.answer }}
                <span>({{ item.fraction }}分)</span>
              </span>
            </div>
          </div>
          <div>
            <span class="bank-floote-explains"
              >小题讲解：{{ tabledata.explains }}</span
            >
          </div>
        </div>
      </div>

      <div class="oneselect-cotainer" v-if="tabledata.type == '判断题'">
        <Audio :audioUrl="tabledata.audioUrl" />
        <div class="oneselect-header">
          <span style="font-size: 18px">1.</span>
          <span class="type">判断</span>
          <span
            class="oneselect-header-title ql-editor"
            v-html="tabledata.smallTopic"
          ></span>
          <span class="score">({{ tabledata.fraction }}分)</span>
        </div>
        <div class="judge-chose">
          <div class="judge-chose-item">
            <i
              :class="tabledata.answer == 'true' ? 'el-icon-success' : ''"
              :style="{ color: tabledata.answer == 'true' ? '#67c23a' : '' }"
            ></i
            >正确
          </div>
          <div class="judge-chose-item">
            <i
              :class="tabledata.answer != 'true' ? 'el-icon-success' : ''"
              :style="{ color: tabledata.answer != 'true' ? '#67c23a' : '' }"
            ></i
            >错误
          </div>
        </div>
        <div class="judge-floote-answeritem">
          答案：
          <span>{{ tabledata.answer == 'true' ? '正确' : '错误' }}</span>
        </div>
        <div class="judge-floote">
          小题讲解：
          <span class="answer">{{ tabledata.explains }}</span>
        </div>
      </div>

      <div class="brief-cotainer" v-if="tabledata.type == '简答题'">
        <Audio :audioUrl="tabledata.audioUrl" />
        <div class="more-header">
          <span style="font-size: 18px">1.</span>
          <span class="type">简答</span>
          <span
            class="oneselect-header-title ql-editor"
            v-html="tabledata.smallTopic"
          ></span>
          <span class="score">({{ tabledata.fraction }}分)</span>
        </div>
        <div class="brief-item">
          <el-image
            v-for="(item, index) in showimgList"
            :key="index"
            class="brief-img-detail"
            :src="item"
            :preview-src-list="showimgList"
            >></el-image
          >
        </div>
        <div class="brief-file">
          <div
            class="brief-file-down"
            v-for="(item, index) in showfileList"
            :key="index"
          >
            <span>文件{{ index + 1 }}</span>
            <el-link
              target="_blank"
              :href="item.url"
              :underline="false"
              style="margin-left: 15px"
            >
              <el-button size="mini" type="warning">点击下载</el-button>
            </el-link>
          </div>
        </div>
        <div class="brief-body">
          <span>答案：{{ tabledata.answer }}</span>
        </div>
        <div class="brief-floote">
          <span>小题讲解：{{ tabledata.explains }}</span>
        </div>
      </div>

      <div class="brief-cotainer" v-if="tabledata.type == '大题'">
        <Audio :audioUrl="tabledata.audioUrl" />
        <div class="more-header">
          <span style="font-size: 18px">1.</span>
          <span class="type">大题</span>
          <span
            class="oneselect-header-title ql-editor"
            v-html="tabledata.bigQuestion"
          ></span>
          <span class="score">({{ tabledata.fraction }}分)</span>
        </div>
        <div class="brief-item">
          <el-image
            v-for="(item, index) in showimgList"
            :key="index"
            class="brief-img-detail"
            :src="item"
            :preview-src-list="showimgList"
            >></el-image
          >
        </div>
        <div class="brief-file">
          <div
            class="brief-file-down"
            v-for="(item, index) in showfileList"
            :key="index"
          >
            <span>文件{{ index + 1 }}</span>
            <el-link
              target="_blank"
              :href="item.url"
              :underline="false"
              style="margin-left: 15px"
            >
              <el-button size="mini" type="warning">点击下载</el-button>
            </el-link>
          </div>
        </div>

        <div v-for="(item, i) in tabledata.bankList" :key="i">
          <div
            class="oneselect-cotainer"
            v-if="item.type == '单选题' || item.type == '单项选择题'"
          >
            <div class="oneselect-header">
              <span style="font-size: 18px">（{{ i + 1 }}）</span>
              <span class="type">单选</span>
              <span class="oneselect-header-title">{{ item.smallTopic }}</span>
              <span class="score">({{ item.fraction }}分)</span>
            </div>
            <div
              class="oneselect-body"
              v-for="(item2, i2) in item.options"
              :key="i2"
            >
              <i
                :class="item2.keyTrue ? 'el-icon-success' : 'el-icon-error'"
                :style="{ color: item2.keyTrue ? '#67c23a' : 'red' }"
              ></i>
              <span>{{ String.fromCharCode(i2 + 65) }}</span>
              .{{ item2.context }}
            </div>
            <div v-for="(item2, i2) in item.options" :key="'info-' + i2">
              <div class="oneselect-floote-answer" v-if="item2.keyTrue">
                答案：
                <span>{{ String.fromCharCode(i2 + 65) }}</span>
                .{{ item2.context }}
              </div>
            </div>
            <div class="more-floote">
              <span class="answer">小题讲解：{{ item.explains }}</span>
            </div>
          </div>

          <div
            class="more-cotainer"
            v-if="item.type == '多选题' || item.type == '多项选择题'"
          >
            <div class="more-header">
              <span style="font-size: 18px">（{{ i + 1 }}）</span>
              <span class="type">多选</span>
              <span class="oneselect-header-title">{{ item.smallTopic }}</span>
              <span class="score">({{ item.fraction }}分)</span>
            </div>
            <div
              class="more-body"
              v-for="(item2, i3) in item.options"
              :key="i3"
            >
              <i
                :class="item2.keyTrue ? 'el-icon-success' : 'el-icon-error'"
                :style="{ color: item2.keyTrue ? '#67c23a' : 'red' }"
              ></i>
              {{ String.fromCharCode(i3 + 65) }}
              .{{ item2.context }}
            </div>
            <div class="more-floote">
              <span class="more-floote-answer">答案：{{ item.answer }}</span>
            </div>
            <div class="more-floote">
              <span class="answer">小题讲解：{{ item.explains }}</span>
            </div>
          </div>

          <div class="oneselect-cotainer" v-if="item.type == '判断题'">
            <div class="oneselect-header">
              <span style="font-size: 18px">（{{ i + 1 }}）</span>
              <span class="type">判断</span>
              <span class="oneselect-header-title">{{ item.smallTopic }}</span>
              <span class="score">({{ item.fraction }}分)</span>
            </div>
            <div class="judge-chose">
              <div class="judge-chose-item">
                <i
                  :class="item.answer == 'true' ? 'el-icon-success' : ''"
                  :style="{ color: item.answer == 'true' ? '#67c23a' : '' }"
                ></i
                >正确
              </div>
              <div class="judge-chose-item">
                <i
                  :class="item.answer != 'true' ? 'el-icon-success' : ''"
                  :style="{ color: item.answer != 'true' ? '#67c23a' : '' }"
                ></i
                >错误
              </div>
            </div>
            <div class="judge-floote-answeritem">
              答案：
              <span>{{ item.answer == 'true' ? '正确' : '错误' }}</span>
            </div>
            <div class="judge-floote">
              小题讲解：
              <span class="answer">{{ item.explains }}</span>
            </div>
          </div>

          <div class="bank-cotainer" v-if="item.type == '填空题'">
            <div class="bank-header">
              <span style="font-size: 18px">（{{ i + 1 }}）</span>
              <span class="type">填空</span>
              <span class="oneselect-header-title">{{ item.smallTopic }}</span>
            </div>
            <div class="bank-floote">
              <div class="bank-floote-answeritem">
                <div>
                  <span>答案：</span>
                </div>
                <div class="bank-floote-answeritem-body">
                  <span
                    class="bank-floote-answer"
                    v-for="(item2, i4) in item.options"
                    :key="i4"
                  >
                    {{ item2.answer }}
                    <span>({{ item2.fraction }}分)</span>
                  </span>
                </div>
              </div>
              <div>
                <span class="bank-floote-explains"
                  >小题讲解：{{ item.explains }}</span
                >
              </div>
            </div>
          </div>

          <div class="brief-cotainer" v-if="item.type == '简答题'">
            <div class="more-header">
              <span style="font-size: 18px">（{{ i + 1 }}）</span>
              <span class="type">简答</span>
              <span class="oneselect-header-title">{{ item.smallTopic }}</span>
              <span class="score">({{ item.fraction }}分)</span>
            </div>
            <div class="brief-item">
              <el-image
                v-for="(item2, index2) in item.imgList"
                :key="index2"
                class="brief-img-detail"
                :src="item2"
                :preview-src-list="item.imgList"
                >></el-image
              >
            </div>
            <div class="brief-file">
              <div
                class="brief-file-down"
                v-for="(item2, index2) in item.fileList"
                :key="index2"
              >
                <span>文件{{ index2 + 1 }}</span>
                <el-link
                  target="_blank"
                  :href="item2.url"
                  :underline="false"
                  style="margin-left: 15px"
                >
                  <el-button size="mini" type="warning">点击下载</el-button>
                </el-link>
              </div>
            </div>
            <div class="brief-body">
              <span>答案：{{ item.answer }}</span>
            </div>
            <div class="brief-floote">
              <span>小题讲解：{{ item.explains }}</span>
            </div>
          </div>
        </div>
      </div>

      <div v-if="tabledata.type == '选词填空题'">
        <!-- <Audio :audioUrl="tabledata.audioUrl"/> -->
        <div class="word_head">
          <div>1.<span class="type">选词填空题</span></div>
          <div
            class="word_content ql-editor"
            ref="word_content"
            v-html="tabledata.smallTopic"
          ></div>
          <span class="score">({{ tabledata.fraction }}分)</span>
        </div>
        <!-- <div class="more-body" v-for="(item,i) in tabledata.options" :key="i">
          <i
            :class="item.keyTrue ? 'el-icon-success' : 'el-icon-error'"
            :style="{color:item.keyTrue ? '#67c23a' : 'red'}"
          ></i>
          {{String.fromCharCode(i+65)}}
          .{{item.context}}
        </div> -->
        <div class="more-floote">
          <span class="more-floote-answer">答案：{{ tabledata.answer }}</span>
        </div>
        <div class="more-floote">
          <span class="answer">小题讲解：{{ tabledata.explains }}</span>
        </div>
      </div>


      <div class="kong"></div>
    </div>
  </div>
</template>

<script>
import { search } from '@/api/topic/showDetail'
import Audio from './Audio.vue'

export default {
  name: 'showDetail',
  props: ['row'],
  components: {
    Audio,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      exhead: 'http://10.168.100.154' + process.env.VUE_APP_BASE_API,
      tabledata: [],
      showimgList: [],
      imgurl: '',
      showfileList: [],
      beanName: '',
      pointptions: [
        {
          label: '对',
          value: true,
        },
        {
          label: '错',
          value: false,
        },
      ],
      options: [
        {
          answer: 'sdsada',
          fraction: 2,
        },
        {
          answer: 'sdsada',
          fraction: 2,
        },
        {
          answer: 'sdsada',
          fraction: 2,
        },
      ],
    }
  },
  watch: {
    row(val1, val2) {
      this.gosearch({
        bankId: val1.id,
        beanName: this.beanName,
      })
    },
  },
  created() {
    if (this.row.type == '单选题' || this.row.type == '单项选择题') {
      this.beanName = 'singleChoiceServiceImpl'
    } else if (this.row.type == '多选题' || this.row.type == '多项选择题') {
      this.beanName = 'multipleChoiceServiceImpl'
    } else if (this.row.type == '填空题') {
      this.beanName = 'completionServiceImpl'
    } else if (this.row.type == '判断题') {
      this.beanName = 'judgeServiceImpl'
    } else if (this.row.type == '简答题') {
      this.beanName = 'shortAnswerServiceImpl'
    } else if (this.row.type == '大题') {
      this.beanName = 'bigQuestionServiceImpl'
    } else if (this.row.type == '选词填空题') {
      this.beanName = 'bankedClozeServiceImpl'
    }
    console.log("row: -------------------",this.row.smallTopic);
    const data = {
      bankId: this.row.id,
      beanName: this.beanName,
    }
    this.gosearch(data)

  },

  methods: {
    gosearch(data) {
      this.loading = true
      search(data).then((res) => {
        let response = res
        let imgtemplatedata = []
        let filetemplatedata = []
        if (response.fileUrl) {
          filetemplatedata = response.fileUrl.split(',')
          for (let i = 0; i <= filetemplatedata.length - 2; i++) {
            const data = {
              filename: filetemplatedata[i],
              url: this.exhead + filetemplatedata[i],
            }
            this.showfileList[i] = data
          }
        }
        if (response.imgUrl) {
          imgtemplatedata = response.imgUrl.split(',')
          for (let i = 0; i <= imgtemplatedata.length - 2; i++) {
            this.showimgList[i] = this.exhead + imgtemplatedata[i]
          }
        }
        if (response.bankList != null) {
          for (let j = 0; j < response.bankList.length; j++) {
            if (response.bankList[j].beanName == 'shortAnswerServiceImpl') {
              response.bankList[j].imgList = []
              response.bankList[j].fileList = []
              let imgtemplatedata = []
              let filetemplatedata = []
              if (response.bankList[j].fileUrl) {
                filetemplatedata = response.bankList[j].fileUrl.split(',')
                for (let k = 0; k <= filetemplatedata.length - 2; k++) {
                  const data = {
                    url: this.exhead + filetemplatedata[k],
                    name: filetemplatedata[k],
                  }
                  response.bankList[j].fileList[k] = data
                }
              }

              if (response.bankList[j].imgUrl) {
                imgtemplatedata = response.bankList[j].imgUrl.split(',')
                for (let k = 0; k <= imgtemplatedata.length - 2; k++) {
                  response.bankList[j].imgList[k] =
                    this.exhead + imgtemplatedata[k]
                }
              }
            }
          }
        }

        if (data.beanName == 'bankedClozeServiceImpl') {
          let options = ''
          response.options.forEach((ele) => {
            options += `<option value="${ele.context}">${ele.context}</option>`
          })
          response.smallTopic = response.smallTopic.replaceAll(
            /AS\w\d/g,
            ` <select class="selectBox" onchange="selectOption"  style="font-size: 17px;width: max-content;">
                ${options}
              </select>`
          )
        }
        this.tabledata = response
      })
      this.loading = false
      setTimeout(() => {
        this.selectOption()
      }, 15000)
    },

    selectOption(e) {
      let select = document.querySelectorAll('.selectBox')
      let answer = ''
      select.forEach((ele, index) => {
        answer += `${ele.value},`
      })
      console.log(answer)
    },
    download(data) {
      //  let url=data.filename;
      // this.download(data);
      //  this.download(this.showfileList[data].url)
    },
  },
}
</script>

<style lang="scss">
.kong {
  width: 100%;
  height: 5px;
}
.rule {
  font-size: 18px;
  font-weight: 500;
  color: #909399;
}
.all {
  width: 100%;
  height: 100%;
  /* background-color: #E4E7ED; */
}
.box {
  padding-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}
.allhead {
  text-align: center;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}
.oneselect-header-title {
  font-size: 18px;
  color: #303133;
}
.type {
  font-size: 16px;
  color: #67c23a;
  border: 1px solid #67c23a;
  margin-right: 10px;
}
.body-chose1 {
  color: #67c23a;
}
.body-chose2 {
  color: #f56c6c;
}
.score {
  color: #909399;
  margin-left: 5px;
}
.answer {
  font-size: 18px;
  color: #67c23a;
}
.oneselect-cotainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.oneselect-header {
  font-size: 16px;
  color: #303133;
}
.oneselect-body {
  margin-top: 10px;
  margin-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  border-bottom: 1px dashed #dcdfe6;
  color: #303133;
}
.oneselect-floote {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #67c23a;
  border-bottom: 1px dashed #dcdfe6;
}
.oneselect-floote-answer {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.more-cotainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.more-header {
  font-size: 16px;
  color: #303133;
}

.word_head {
  font-size: 18px;
  color: #303133;
  display: flex;
  flex-direction: column;
  .type {
    font-size: 16px;
    color: #67c23a;
    border: 1px solid #67c23a;
    margin-right: 10px;
  }
  .word_content {
    // display: flex;
    display: inline;
  }
  p {
    display: inline-block;
  }
}

.more-body {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 18px;
  color: #303133;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #dcdfe6;
}
.more-floote {
  margin-top: 10px;
  font-size: 18px;
  padding-bottom: 10px;
  color: #67c23a;
  border-bottom: 1px dashed #dcdfe6;
}
.more-floote-answer {
  margin-top: 10px;
  font-size: 18px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #dcdfe6;
  color: #303133;
}
.bank-cotainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.bank-header {
  font-size: 16px;
  color: #303133;
}
.bank-body {
  margin-top: 10px;
  margin-left: 10px;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.bank-floote {
  margin-top: 20px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.bank-floote-answer {
  margin-left: 10px;
  color: #303133;
}
.bank-floote-answeritem {
  display: flex;
  font-size: 18px;
  color: #303133;
  padding-bottom: 10px;
  border-bottom: 1px dashed #dcdfe6;
}
.bank-floote-answeritem-body {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
}
.bank-floote-explains {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #67c23a;
}
.judge-chose {
  margin-top: 15px;
  padding-bottom: 10px;
  display: flex;
  border-bottom: 1px dashed #dcdfe6;
  color: #303133;
}
.judge-chose-item {
  margin-left: 20px;
  font-size: 18px;
  color: #303133;
}
.brief-cotainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 40px;
}
.judge-floote {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #67c23a;
  border-bottom: 1px dashed #dcdfe6;
}
.judge-floote-answeritem {
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.brief-header {
  font-size: 16px;
  color: #303133;
}
.brief-body {
  margin-top: 20px;
  margin-left: 10px;
  padding-bottom: 10px;
  font-size: 18px;
  color: #303133;
  border-bottom: 1px dashed #dcdfe6;
}
.brief-floote {
  margin-top: 20px;
  padding-bottom: 20px;
  margin-left: 10px;
  font-size: 18px;
  color: #67c23a;
  border-bottom: 1px dashed #dcdfe6;
}
.brief-item {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.brief-img-detail {
  width: 200px;
  height: 200px;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
}
.brief-file {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  justify-content: center;
  color: #909399;
}
.brief-file-down {
  font-size: 18px;
  margin-top: 20px;
}
</style>
